<template>
	<div >
<!-- 		<div>
			<span>{{props.label}}</span>
		</div> -->
		<div style="display: flex;">
			  <el-tree
			    ref="treeRef"
			    :data="layerData"
			    show-checkbox
			    default-expand-all
			    node-key="id"
			    highlight-current
				:default-checked-keys="checked"
			    :props="defaultProps"
				:check-strictly="true"
				:check-on-click-node="true"
				@check-change="onchange"
			  />
			
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ElTree } from 'element-plus'
	
	import {
	  getActorClassifyOptions
	} from "@/api/wdp/actor";
	
	const treeRef = ref<InstanceType<typeof ElTree>>()
	const loading=ref(false);
	const input_model=ref();
	const scene_model=ref();
	const size=ref('small');
	const props=defineProps({
		pidentifier:String,
		identifier:String,
		label:String,
		required:Boolean,
		value:String,
		sceneId:String,
		size:String,
	})
	const checked=ref<any>([])
	let layerData=ref<any[]>([]);
	const defaultProps = {
	  label: 'name',
	  value:'id',
	  children: 'children',
	}
	const loadLayer=()=>{
		loading.value=true;
		getActorClassifyOptions({
			sceneId:scene_model.value,
		})
		.then((res:any) => {
			layerData.value= recurOptions(res.data)
		})
		.catch((e) => {
			console.error(e)
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	function recurOptions(list:any) {
	  function buildTree(node:any) {
	    let children = []
	    for (let item of list) {
	      if (item.parentId === node.id) {
	        children.push(buildTree(item))
	      }
	    }
	    if (children.length > 0) {
	      node.children = children
	    }
	    return node
	  }
	  let res = []
	  for (let item of list) {
	    if (item.parentId === scene_model.value) {
	      res.push(buildTree(item))
	    }
	  }
	  return res
	}
	
	watch(props,() => {
			input_model.value=props.value
			scene_model.value=props.sceneId
			if(props.size){
				size.value=props.size
			}
			if(input_model.value){
				let values=input_model.value.split(';');
				if(values){
					checked.value=values;
				}
			}
			loadLayer();
		},
	    { immediate: true, deep: true },
	)

	const emits = defineEmits(['onchange'])
	const onchange=(data:any,isChecked:boolean)=>{
		if(isChecked){
			if(!checked.value.includes(data.id)){
				checked.value.push(data.id)
			}
		}else{
			checked.value = checked.value.filter((item:any) => item !== data.id);
		}
		emits('onchange',{
			pidentifier:props.pidentifier,
			identifier:props.identifier,
			value:checked.value.length>0?checked.value.join(";"):undefined
		})
	}
	
	onBeforeUnmount(()=>{
		input_model.value=undefined
		scene_model.value=undefined
		checked.value=[];
	})
</script>

<style scoped>
	:deep(.el-input) {
	    --el-input-text-color: #ccc;
	    --el-input-border: #105ae4;
	    --el-input-hover-border: #3fa3ff!important;
	    --el-input-focus-border: #3fa3ff!important;
	    --el-input-transparent-border: 0 0 0 1px transparent inset;
	    --el-input-border-color: transparent;
	    --el-input-border-radius: 5px;
	    --el-input-bg-color: #1b1b1b;
	    --el-input-icon-color: var(--el-text-color-placeholder);
	    --el-input-placeholder-color: var(--el-text-color-placeholder);
	    --el-input-hover-border-color: transparent;
	    --el-input-clear-hover-color: var(--el-text-color-secondary);
	    --el-input-focus-border-color: transparent;
	}
	:deep(.el-input-number .el-input__inner){
		text-align: left;
	}
	:deep(.el-input__wrapper){
		border-radius:0px;
	}
	:deep(.el-tree){
		width: 100%;
	}
	:deep(.el-tree-node__label){
		color: #fff;
	}
</style>